<template>
    <div>
        <el-row>
            <el-col :span="24"><el-text class="mx-1" type="warning">共有{{ list.length }}项，还剩{{ undoNum }}项</el-text></el-col>        
        </el-row> 
        <el-row >
            <el-col :span="24">
            <el-button type="warning" round @click="show('all')">全部</el-button>
            <el-button type="warning" round @click="show('done')">已完成</el-button>
            <el-button type="warning" round @click="show('undo')">待完成</el-button>
            <el-button type="warning" round @click="show('clear')">清空</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default{
   props:{list:Array},
   computed:{
    undoNum(){
        let count =0
        //遍历数组。统计state是false的个数
        this.list.map( v =>{
            if(v.state ==false){
                count++
            }
        })
        return count
    }
   },
   methods:{
    show(flag){
        //把对应的参数传递给父组件
        this.$emit('show',flag)
    }
   }
}
</script>